<template>
  <div>
    <!-- 页面标题 -->
    <h1>
      修改密码
    </h1>
    <!-- 表单区域 -->
    <div class="form">
      <!-- 表单组件，绑定数据模型和校验规则 -->
      <el-form :model="formData" :rules="rules" ref="formRef">
        <!-- 原密码输入框 -->
        <el-form-item label="原密码" prop="oldPwd">
          <!-- 绑定原密码输入框，失去焦点时触发校验 -->
          <el-input v-model="formData.oldPwd" @blur="checkPwd"></el-input>
        </el-form-item>
        <!-- 新密码输入框 -->
        <el-form-item label="新密码" prop="newPwd">
          <!-- 绑定新密码输入框，设置类型为密码 -->
          <el-input type="password" v-model="formData.newPwd"></el-input>
        </el-form-item>
        <!-- 确认新密码输入框 -->
        <el-form-item label="确认新密码" prop="newPwd1">
          <!-- 绑定确认新密码输入框，设置类型为密码 -->
          <el-input type="password" v-model="formData.newPwd1"></el-input>
        </el-form-item>
        
        <!-- 修改按钮 -->
        <el-form-item>
          <el-button type="primary" @click="addBtn">立即修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'; // 导入 Vue 的响应式和引用功能
import { editpwd, checkoldpwd } from '@/views/api/account'; // 导入修改密码和校验原密码的 API
import { ElMessage } from 'element-plus'; // 导入 Element Plus 的消息提示组件
import { useRouter } from 'vue-router'; // 导入 Vue Router

// 创建表单引用
const formRef = ref(null);
// 创建路由实例
const router = useRouter();

// 从 sessionStorage 中获取用户 ID
const { id } = JSON.parse(sessionStorage.getItem('user'));
// 定义表单数据模型
const formData = reactive({
  newPwd: '', // 新密码
  oldPwd: '', // 原密码
  newPwd1: '', // 确认新密码
  id: id // 用户 ID
});

// 校验确认密码是否与新密码一致
const validatePassword1 = (rule, value, callback) => {
  // 如果确认密码与新密码不一致，返回错误信息
  if (value !== formData.newPwd) {
    callback(new Error('两次密码不一致'));
  } else {
    callback(); // 校验通过
  }
};

// 定义表单校验规则
const rules = {
  oldPwd: [
    { required: true, message: '请输入原密码', trigger: 'blur' } // 原密码必填，失去焦点时触发校验
  ],
  newPwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' } // 新密码必填，失去焦点时触发校验
  ],
  newPwd1: [
    { validator: validatePassword1, trigger: 'blur' } // 确认新密码校验，失去焦点时触发
  ]
};

// 点击修改按钮时触发
const addBtn = () => {
  // 调用表单的 validate 方法进行校验
  formRef.value.validate((valid) => {
    if (valid) {
      // 如果校验通过，调用修改密码的 API
      editpwd(formData).then(res => {
        if (res.code === 0) {
          // 如果修改成功，提示用户并清除 sessionStorage，跳转到登录页面
          ElMessage({
            message: '修改密码成功，请重新登录',
            type: 'success',
          });
          sessionStorage.clear();
          router.push('/login');
        }
      });
    } else {
      // 如果校验失败，提示用户输入正确的信息
      ElMessage({
        message: '请输入正确的信息',
        type: 'error',
      });
      return false;
    }
  });
};

// 校验原密码是否正确
const checkPwd = async () => {
  // 获取用户输入的原密码
  console.log(formData.oldPwd);
  let data = {
    id: formData.id, // 用户 ID
    oldPwd: formData.oldPwd // 原密码
  };
  // 调用校验原密码的 API
  let { code, msg } = await checkoldpwd(data);
  if (code == 0) {
    // 如果校验成功，提示用户
    ElMessage.success(msg);
  } else {
    // 如果校验失败，提示用户
    ElMessage.error(msg);
  }
};
</script>

<style lang="scss" scoped>
// 标题样式
h1 {
  font-size: 28px; // 字体大小
  margin: 20px 0; // 上下外边距
  font-weight: 350; // 字体粗细
  border-bottom: 1px solid #ccc; // 底边框
}
// 表单样式
.form {
  margin-left: 50px; // 左外边距
  .el-form-item {
    margin-top: 28px; // 上外边距
  }
}
// 输入框高度
.el-input {
  height: 40px;
}
</style>